<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-11-02 23:32:31
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-01-31 22:19:45
-->
<template>
  <a-dropdown
    v-model:open="panelVisible"
    :trigger="['click']"
    overlayClassName="advanced-search-panel"
    :overlayStyle="dropdownPanelStyle"
    placement="bottomRight"
  >
    <a-button class="advanced-search-icon" type="primary">
      <template #icon>
        <FilterOutlined />
      </template>
    </a-button>
    <template #overlay>
      <div>
        <div class="title">查询条件</div>
        <div class="form">
          <a-form ref="formRef" :model="searchModel">
            <a-row>
              <a-col
                :span="getFormItemSpan(item)"
                v-for="(item, index) in fields"
                :key="index"
              >
                <a-form-item
                  class="search-form-item"
                  :="getFormItemProps(item)"
                  :prop="item.name"
                >
                  <component
                    :is="getComponentType(item.input)"
                    :="getComponentProps(item)"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="submit-bar">
          <a-space>
            <a-button
              @click="
                $emit('close');
                panelVisible = false;
              "
              >关闭</a-button
            >
            <a-button @click="onResetForm">清空</a-button>
            <a-button
              type="primary"
              @click="
                $emit('search');
                panelVisible = false;
              "
            >
              <template #icon>
                <SearchOutlined />
              </template>
              查询
            </a-button>
          </a-space>
        </div>
      </div>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
import {
  IButtonActionsItem,
  IComponentOptions,
  ISerachFieldItem,
} from "@/types";
import {
  FilterOutlined,
  SearchOutlined,
  ClearOutlined,
} from "@ant-design/icons-vue";
import {
  Input,
  InputGroup,
  InputNumber,
  Select,
  TreeSelect,
  DatePicker,
  MonthPicker,
  WeekPicker,
  TimePicker,
  RangePicker,
  Rate,
  Switch,
  Checkbox,
  Radio,
  RadioGroup,
  RadioButton,
  Cascader,
  AutoComplete,
  Slider,
  CheckboxGroup,
  FormInstance,
} from "ant-design-vue";
import EnumSelect from "@/components/enum-select/Index.vue";
import DictionarySelect from "@/components/dictionary-select/Index.vue";
import UserSelect from "@/components/user-select/Index.vue";
import RoleSelect from "@/components/role-select/Index.vue";
import { computed, DefineComponent, h, ref } from "vue";
type AdvancdSearchPanelProp = {
  fields: Array<ISerachFieldItem>;
  actions?: Array<IButtonActionsItem>;
  showInput?: boolean;
  inputStyle?: Record<string, any>;
  searchModel: Record<string, any>;
  labelWidth?: number;
};
const props = defineProps<AdvancdSearchPanelProp>();
const emits = defineEmits(["search", "clear", "close"]);
const dropdownPanelStyle = computed(() => {
  return {
    width: (props.fields.length > 2 ? 650 : 400) + "px",
  };
});

const panelVisible = ref(false);
const formRef = ref();

const getComponentType = (name: string) => {
  const componets: Record<string, DefineComponent<any, any, any>> = {
    "a-input": Input,
    "a-inpujt-group": InputGroup,
    "a-input-number": InputNumber,
    "a-select": Select,
    "a-tree-select": TreeSelect,
    "a-date-picker": DatePicker,
    "a-month-picker": MonthPicker,
    "a-week-picker": WeekPicker,
    "a-time-picker": TimePicker,
    "a-range-picker": RangePicker,
    "a-rate": Rate,
    "a-switch": Switch,
    "a-checkbox": Checkbox,
    "a-checkbox-group": CheckboxGroup,
    "a-radio": Radio,
    "a-radio-group": RadioGroup,
    "a-radio-button": RadioButton,
    "a-cascader": Cascader,
    "a-auto-complete": AutoComplete,
    "a-slider": Slider,
    "enum-select": EnumSelect,
    "dictionary-select": DictionarySelect,
    "role-select": RoleSelect,
    "user-select": UserSelect,
  };
  return componets[name] || name ? name : Input;
};

const getComponentProps = (item: ISerachFieldItem) => {
  let comProps: any = {
    ...item.props,
  };
  if (
    item.input == "a-checkbox" ||
    item.input == "a-switch" ||
    item.input == "a-radio"
  ) {
    comProps.checked = props.searchModel[item.name];
    comProps["onUpdate:checked"] = (checked) => {
      props.searchModel[item.name] = checked;
    };
  } else {
    comProps.value = props.searchModel[item.name];
    comProps["onUpdate:value"] = (checked) => {
      props.searchModel[item.name] = checked;
    };
  }
  return comProps;
};

const getFormItemSpan = (item: ISerachFieldItem) => {
  return item.wholeLine ? 24 : props.fields.length > 2 ? 12 : 24;
};

const getFormItemProps = (item: ISerachFieldItem) => {
  return { label: item.label, hasFeedback: item.hasFeedback };
};

const onResetForm = () => {
  let form = formRef.value as FormInstance;
  form.resetFields();
  emits("clear");
};
</script>

<style lang="less">
.advanced-search-panel {
  margin-top: 5px;
  background: #fff;
  padding: 10px;
  border: 1px solid #d8d8d8;

  .title {
    font-size: 16px;
    line-height: 32px;
  }

  .form {
    padding: 10px 24px 10px 0;
  }

  .submit-bar {
    display: flex;
    justify-content: flex-end;
  }

  .search-form-item {
    display: flex;
    width: 100%;
    > .ant-form-row {
      display: flex;
      width: 100%;
    }
    .ant-form-item-label {
      width: 100px;
      text-align: right;
    }

    .ant-form-item-control {
      flex: 1;
    }
  }
}
</style>
